import React, {Component} from 'react'
export default class ComponentA extends React.Component {
  constructor() {
    super();
    // 状态机,数据都放在这里，在这里初始化，就像vue的data
    this.state = {
      info: {name: 'Jack'},
      time: new Date().toLocaleTimeString()
    }
    // 在构造函数中，修改方法的指向
    this.change = this.change.bind(this)
  }
    // 修改数据,修改状态机中的name属性
    changeName() {
      console.log(111,this.state.time);
      // 修改状态机中的数据
      // 
      this.setState({
        time: 111
      },()=>{
        // setState的回调函数，在状态机更新后执行
        console.log(333,this.state.time);
      })
      console.log(222,this.state.time);
    }
    show() {
      console.log(this);
    }
    change() {
      console.log(this);
    }
  // }
  render() {
  return <div className="div">
    访问状态机中的数据：{this.state.info.name}
    <p>报时：{this.state.time}</p>
    <button onClick={()=>this.changeName()}>修改名字ES6</button>
    {/* 解决es5调用函数时this未定义的方案 */}
    <button onClick={this.show.bind(this)}>打印ES5</button>
    <input onChange={this.change} />
    </div>
  }
}
